<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Paypal訂單支付結果</title>
    <style>
        .body{
            width:100%;
            height: 100%;
            text-align:center
        }
        .img{
            width:300px;
            height: 300px;
            margin-top: 40%;
        }
        .msg{
            font-size: 80px;
            margin-top: 100px;
            color: #f8712f;
        }
        .returns{
            font-size: 38px;
            margin-top: 100px;
            color: #f8712f;
        }
        .btn{
            padding: 20px 20px;
            font-size: 60px;
            margin-top: 100px;
            color: #ffffff;
            background-color: #f8712f;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div class="body">
    <img src="http://shopper.wpgyj.top/error.png" alt="" class="img">
    <div class="msg">取消支付</div>
    <div class="returns" id="returns">3秒後自動返回APP，若沒反應，請點擊按鈕返回</div>
    <div class="btn" onclick="returnApp()">點擊返回</div>
</div>


</body>
</html>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                flag: 'cancel'
            }
        });
    });
    var returns = document.getElementById('returns');
    var time = 2;

    var timeId = setInterval(function () {
        var text = time + '秒後自動返回APP，若沒反應，請點擊按鈕返回';
        returns.innerText = text;
        time--;
        if(time == -1){
            clearInterval(timeId);
            returnApp();
        }
    }, 1000);


        function returnApp() {
            uni.postMessage({
                data: {
                    payStatus: 'cancel'
                }
            });
        }
    }

</script>
